

<template>
  <view  >
      <view class="image_tile">
          <img  :src="this.curGoods.image" alt="">
          <view class="app_bar flex">
              <van-icon name="arrow-left" @click="toBack()" type="back"  size="24" color="#fff" />
              <view class="title_text flex a-item j-center">
                  商品详情
              </view>
          </view>
      </view>
      <view class="goods_content">
            <view class="bas_info">
                <view class="goods_name">
                    <view class="name">{{ curGoods.goodsName }}</view>
                    <view class="unit">{{ curGoods.boxUnitCount }}{{ curGoods.mainUnitName }}{{ curGoods.mainUnitCount }}{{ curGoods.boxUnitName }}</view>
                </view>
                <view class="flex a-item" style="margin-top: 40rpx">
                    <view class="fl1">
                        <view class="t1"> {{ curGoods.goodsBrandName }}</view>
                        <view class="t2">商品品牌</view>
                    </view>
                    <view class="fl1">
                        <view class="t1"> {{ curGoods.goodsTypeName }}</view>
                        <view class="t2">商品分类</view>
                    </view>
                    <view class="fl1">
                        <view class="t1"> {{ curGoods.model }}</view>
                        <view class="t2">商品规格</view>
                    </view>
                </view>
            </view>
          <view class="code_box flex">
                <view class="flex code_row">
                    <view class="label">产品编码</view>
                    <view class="code">{{ curGoods.goodsCode }}</view>
                </view>
              <view class="flex code_row">
                  <view class="label">条形码</view>
                  <view class="code">{{ curGoods.barcode }}</view>
              </view>
              <view class="flex code_row">
                  <view class="label">箱条形码</view>
                  <view class="code">{{ curGoods.boxBarcode }}</view>
              </view>
          </view>
          <view class="promotion flex">
                <view class="label">
                    促销消息
                </view>
              <view class="label yellow">
                  优惠
              </view>
          </view>
          <view class="price_box">
                <view class="flex price_row">
                    <view class="label">单价</view>
                    <view><input type="number" v-model="curGoods.taxPrice"></view>
                </view>
              <view class="flex price_row">
                  <view class="label">数量</view>
                  <view><input type="number" v-model="curGoods.goodsCount"></view>
              </view>
              <view class="flex price_row">
                  <view class="label">辅数量</view>
                  <view><input class="boxNum" type="number" v-model="curGoods.boxNum"></view>
                  <view>{{ curGoods.boxUnitName }}</view>
                  <view><input class="boxNum" type="number" v-model="curGoods.mainNum"></view>
                  <view>{{ curGoods.mainUnitName }}</view>
              </view>
              <view class="flex price_row">
                  <view class="label">金额</view>
                  <view><input type="number" v-model="curGoods.taxAmount"></view>
              </view>
              <view class="flex price_row" style="align-items: start">
                  <view class="label">备注</view>
                  <view><input class="remark"  style="height: 135rpx" type="text" v-model="curGoods.remark"></view>
              </view>
          </view>
          <view style="height: 50rpx" />
      </view>
  </view>
</template>

<script>

import pub from "../../common/pub";

export default {
    name: "shoppingDetail",
    data(){
      return{
        curGoods:{}
      }
    },
    created() {
        pub.$receive('curGoods',(goods)=>{
          this.curGoods = goods
        })
    },
    methods:{
        toBack(){
            history.back()
            //uni.navigateBack({delta: 1,})
        }
    }
}
</script>
<style scoped lang="scss">
 .image_tile{
   position: relative;
   z-index: 1;
  .app_bar{
    position: absolute;
    top: 88rpx;
    left: 0;
    padding-left: 38rpx;
    .title_text{
      width: 674rpx;
      font-weight: 600;
      font-size: 36rpx;
      color: #fff;
    }
   }
   img{
     width: 750rpx;
     height: 680rpx;
   }
 }
 .goods_content{
     padding: 0 38rpx;
     width: 674rpx;
     height: 300rpx;
     margin-top: -40rpx ;
     z-index: 10;
     position: relative;
     .label{
         font-size: 28rpx;
         font-weight: 400;
         color: #999999;
     }
     .bas_info{
         width: 690rpx;
         height: 304rpx;
         background: #FFFFFF;
         box-shadow: 0rpx 6rpx 20rpx 1rpx rgba(32,69,97,0.04);
         border-radius: 14rpx;
         overflow: hidden;
         .goods_name{
             margin-top: 40rpx;
             width: 100%;
             display: flex;
             flex-direction: column;
             align-items: center;
             .name{
                 font-size: 42rpx;
                 font-weight: 600;
                 color: #333333;
                 text-align: center;
             }
             .unit{
                 font-size: 28rpx;
                 font-weight: 400;
                 color: #016EF9;
             }
         }
         .t1{
             text-align: center;
             font-size: 32rpx;
             font-weight: 600;
             color: #666666;
             margin-bottom: 10rpx;
         }
         .t2{
             text-align: center;
             font-size: 26rpx;
             font-weight: 400;
             color: #999999;
         }
     }
     .code_box{
         margin-top: 16rpx;
         width: 642rpx;
         height: 252rpx;
         background: #FFFFFF;
         box-shadow: 0rpx 6rpx 20rpx 1rpx rgba(32,69,97,0.04);
         border-radius: 14rpx;
         padding: 0 24rpx;
         flex-direction: column;
         .code_row{
             width: 100%;
             justify-content: space-between;
             flex:1;
             align-items: center;
             border-bottom:  #EFF3F9 2rpx solid;
             .code{
                 font-size: 28rpx;
                 font-weight: 400;
                 color: #666666;
             }
         }
     }
     .promotion{
         width: 650rpx;
         height: 48rpx;
         background: #FFFFFF;
         box-shadow: 0rpx 6rpx 20rpx 1rpx rgba(32,69,97,0.04);
         border-radius: 14rpx;
         padding: 20rpx;
         margin-top: 16rpx;
         align-items: center;
         justify-content: space-between;
     }
     .price_box{
         margin-top: 16rpx;
         width: 650rpx;
         height: 457rpx;
         background: #FFFFFF;
         box-shadow: 0rpx 6rpx 20rpx 1rpx rgba(32,69,97,0.04);
         border-radius: 14rpx;
         padding: 20rpx;
         .price_row{
             align-items: center;
             justify-content: space-between;
             margin-bottom: 20rpx;
             input{
                 width: 533rpx;
                 height: 60rpx;
                 background: #EAEDF1;
                 border-radius: 10rpx;
                 opacity: 0.6;
                 text-align: right;
                 padding:0 20rpx;
                 font-size: 28rpx;
                 font-weight: 500;
                 color: #666666;
             }
             .boxNum{
                 width: 190rpx;
                 height: 60rpx;
                 background: #EAEDF1;
                 border-radius: 10rpx;
                 opacity: 0.6;
                 text-align: right;
                 padding:0 20rpx;
                 font-size: 28rpx;
                 font-weight: 500;
                 color: #666666;
             }
         }
     }


 }
 .yellow{
     color: #FFB509 !important;
 }
</style>
